<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="anly-app-container calendar-list-container">
    <el-row>
      <div class="filter-withline line-with-verticl"><div class="line-with-verticl over-topline"></div>
        <div class="filter-wrap">
          <div class="filter-item">
            <el-radio v-model="radio" label="1" @change="toggleTime('1')" style="padding-left: 10px;">固定时间</el-radio>
          </div>
          <div class="filter-item">
            <div style="padding-left: 10px;">
              <el-radio-group v-model="listDate.tag" :disabled="radio === '1' ? false : true" size="mini">
                <el-radio-button label="0">今天</el-radio-button>
                <el-radio-button label="1">昨天</el-radio-button>
                <el-radio-button label="2">最近7天</el-radio-button>
                <el-radio-button label="3">最近30天</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="filter-item">
            <el-radio v-model="radio" label="2" @change="toggleTime('2')" style="padding-left: 70px;">自定义时间</el-radio>
          </div>
          <div class="filter-item">
            <el-date-picker  size="mini" :picker-options="pickerBeginDateBefore" :disabled="radio === '2' ? false : true" v-model="listDate.dateStrs" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>
          <div class="filter-item">
            <el-button type="primary" style="margin:5px 0 5px 30px" size="mini" @click="handleFilter">确定</el-button>
          </div>
        </div>
      </div>
    </el-row>
    <el-container>
      <el-aside width="300px">
        <div class="aside-withline">
          <div class="wrap-with-halfboder"></div>
          <div class="list">
            <p><i class="el-icon-caret-right"></i>隐患处理情况</p>
            <div class="handle-defect" id="handle_defect" ref="tabledefectf"></div>
          </div>
          <div class="list">
            <p style="padding: 50px 0 20px 29px;"><i class="el-icon-caret-right"></i>隐患类型分布</p>
            <div class="table_one" id="table_one" ref="tableonef" style="height: 270px;">
            </div>
          </div>
        </div>
      </el-aside>
      <el-main style="height: 100%;text-align:left;overflow:auto;" class="anly-main">
        <div class="anly-main-wrap">
          <div class="wrap-with-halfboder"></div>
          <el-row>
            <div class="list anly-main-chart">
              <p><i class="el-icon-caret-right"></i>隐患变化趋势</p>
              <div class="table_two" id="table_two" ref="tabletwof">
              </div>
            </div>
          </el-row>
          <div class="filter-result-wraplist">
            <div class="filter-result-left">
            <div class="list">
              <p><i class="el-icon-caret-right"></i>报警TOP10</p>
              <div class="table_three">
                <el-table :data="list" style="width: 100%">
                  <el-table-column label="排名">
                    <template slot-scope="scope">
                      <span style="color: #50E3C2">NO.{{scope.row.id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="建筑名" >
                    <template slot-scope="scope">
                      <span>{{scope.row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="次数">
                    <template slot-scope="scope">
                      <span>{{scope.row.count}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            </div>
            <div class="filter-result-right">
            <div class="list">
              <p><i class="el-icon-caret-right"></i>故障TOP10</p>
              <div class="table_three">
                <el-table :data="slist" style="width: 100%">
                  <el-table-column label="排名">
                    <template slot-scope="scope">
                      <span style="color: #50E3C2">NO.{{scope.row.id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="建筑名" >
                    <template slot-scope="scope">
                      <span>{{scope.row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="次数">
                    <template slot-scope="scope">
                      <span>{{scope.row.count}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            </div>
          </div>
          </div>
      </el-main>
    </el-container>
  </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import {
    getDefect,
    CountByType,
    CountByMonth,
    selectCountByBuild,
  } from "@/api/device/deviceFireMain/index";
  export default {
    data() {
      return{
        value: '',
        radio: '1',
        list: [],
        slist:[],
        typeList:[],
        type:'',
        time: '',
        pickerBeginDateBefore:{
          disabledDate: time => {
            // let _now = Date.now();
            // let _nowbefore30day = new Date(_now - 1000 * 60 * 60 * 24 * 30);
            // return time.getTime() > _now||time.getTime()<_nowbefore30day.getTime();
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        listDate:{
          dateStrs:null,
          tag: "0",
          channelId:null
        },
        params:{
          channelId:"",
        },
        isnonetype:false,
        isnonetime:false
      }
    },
    mounted() {
      this.fetchData();
    },
    watch:{
      '$route':'fetchData'
    },
    methods: {
      fetchData(){
        let vm = this;
        vm.params.channelId=vm.$route.params.id;
        vm.toggleTime('1');
        vm.buildCount();
        vm.initChart1();
        vm.initChart2();
        vm.handleDefectChart();
      },
      handleDefectChart(){
        let dateStrs;
        if(this.listDate.dateStrs){
          dateStrs = (this.listDate.dateStrs).toString();
        }
        getDefect(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
          this.isnonetime = res.data.length === 0;
          let ayarr = [{value:res.data.callCount,name:'未处理'},
            {value:res.data.handleCount,name:'已处理'}];
          let stringarr = ['未处理','已处理'];
          var handleChart = echarts.init(this.$refs.handledefectf);
          var option = {
            tooltip : {
              trigger: 'item',
              formatter: "{b} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              icon:'circle',
              right: '10',
              top:'center',
              textStyle: {
                color: 'rgba(80, 227, 194, 0.7)'
              },
              data: stringarr,
              color:['#50E3C2','#EB7E10'],
            },
            series : [
              {
                name:'',
                type: 'pie',
                radius: ['32%', '70%'],
                center: ['42%', '50%'],
                data:ayarr,
                color:['#50E3C2','#EB7E10'],
                label:{
                  show: true,
                  formatter: '{c}个',
                }
              },
              {
                type: 'pie',
                radius: ['32%', '70%'],
                center: ['42%', '50%'],
                data:ayarr,
                color:['#50E3C2','#EB7E10'],
                itemStyle: {
                  normal:{
                    label:{
                      show : true,
                      position : 'inner',
                      formatter: '{d}%',
                      textStyle:{
                        color:'#ffffff'
                      }
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                }
              }
            ]
          };
          handleChart.setOption(option);
        })
      },
      //火灾报警类型分布
      initChart1() {
        let dateStrs;
        if(this.listDate.dateStrs){
          dateStrs = (this.listDate.dateStrs).toString();
        }
        CountByType(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
          if (!res.data||res.data.length===0) {
            this.typeList = [];
            this.isnonetype=true;
          }else{
            this.isnonetype=false;
            this.typeList = res.data;
          }
          const type_arr = [];
          const dataStruct = [];
          for(let obj of this.typeList){
            let alrmType = obj.alrmType;
            dataStruct.push({value: obj.count, name: alrmType}); //重新组成对象
            type_arr.push(alrmType); //把所有的类型放在数组里
          }
          var chart1 = echarts.init(this.$refs.tableonef);
          var option = {
            tooltip : {
              trigger: 'axis',
              axisPointer:{
                type: 'shadow'
              }
            },
            grid:{
              left:'3%',
              right:'4%',
              bottom:'3%',
              top:'3%',
              containLabel: true
            },
            xAxis: {
              color:'#fff',
              splitLine : {//去掉网格线
                show : true,
                lineStyle:{
                  color:'rgba(80, 227, 194, 0.3)',
                  type:'dashed'
                }
              },
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel : {//坐标轴刻度标签的相关设置
                show : true,
                textStyle : {
                  color : 'rgba(80, 227, 194, 0.3)',
                  align : 'right',
                  fontSize: 12
                }
              },
              axisLine : {
                lineStyle : {
                  color : 'rgba(80, 227, 194, 0.3)'
                }
              },
              axisTick : {
                lineStyle : {
                  color : 'rgba(80, 227, 194, 0.3)'
                }
              },
            },
            yAxis: {
              type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
              data: type_arr,
              axisLabel : {
                show : true,
                textStyle : {
                  color : 'rgba(80, 227, 194, 0.7)',
                  align : 'right',
                  fontSize: 12    /*文字大小*/
                }
              },
              axisLine : {
                lineStyle : {
                  color : 'rgba(80, 227, 194, 0.3)'//轴的颜色
                }
              },
              axisTick : {
                lineStyle : {
                  color : 'rgba(80, 227, 194, 0.3)'//轴上点的颜色
                }
              },

            },
            series : [
              {
                name:'',
                type: 'bar',
                data:dataStruct,
                label : {
                  normal : {
                    show : true,//显示数字
                    position : 'right',
                    textStyle : {
                      fontSize : '14',//柱状上的显示的文字
                      color:'#50E3C2'
                    }
                  }
                },
                barWidth : 30,//柱子宽度
                itemStyle: {
                  normal: {
                    color:new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        {offset: 0, color: 'rgba(80, 227, 194, 0)'},
                        {offset: 1, color: '#3DA996'}
                      ]
                    )
                  }
                }
              }
            ]
          };
          chart1.setOption(option);

        })

      },
      //火灾报警时间分布
      initChart2() {
        let dateStrs;
        if(this.listDate.dateStrs){
          dateStrs = (this.listDate.dateStrs).toString();
        }
        CountByMonth(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
          this.isnonetime = res.data.length === 0;
          let date_arr = res.data.dateList;
          let callList = res.data.callList;
          let faultList = res.data.faultList;

          var chart2 = echarts.init(this.$refs.tabletwof);

          var option = {
            grid:{
              left:60,
              right:40,
              bottom:20,
              top:50
            },
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend:{
              icon:'roundRect',
              orient: 'vertical',
              textStyle: {
                color: 'rgba(80, 227, 194, 0.7)'
              },
              itemHeight:3,
              left:'right',
              top:'top',
              data:['报警','故障']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: date_arr,
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  color:'rgba(80, 227, 194, 0.3)'
                }
              }
            },
            dataZoom: [
              {
                type: 'inside',
                start: 0,
                end: 100
              },
            ],
            series: [
              {
                type:'line',
                name:'报警',
                smooth:true,
                symbol: 'none',
                showAllSymbol: true,
                sampling: 'average',
                itemStyle: {
                  normal: {
                    color: '#E4393C'
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#E4393C'
                    }, {
                      offset: 1,
                      color: 'rgba(0,0,0,0)'
                    }])
                  }
                },
                data: callList
              },
              {
                type:'line',
                smooth:true,
                symbol: 'none',
                name:'故障',
                showAllSymbol: true,
                sampling: 'average',
                itemStyle: {
                  normal: {
                    color: '#F5A623'
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#F5A623'
                    }, {
                      offset: 1,
                      color: 'rgba(0,0,0,0)'
                    }])
                  }
                },
                data: faultList
              }
            ]
          };
          chart2.setOption(option);
        })

      },
      //火灾报警建筑排名
      buildCount() {
        let dateStrs;
        if(this.listDate.dateStrs){
          dateStrs = (this.listDate.dateStrs).toString();
        }
        selectCountByBuild(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs},{alrmCategory:1})).then(res=>{
          this.list = res.data;
        });
        selectCountByBuild(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs},{alrmCategory:0})).then(res=>{
          this.slist = res.data;
        })
      },
      handleFilter() {
        this.initChart1();
        this.initChart2();
        this.handleDefectChart();
        this.buildCount();
      },
      toggleTime(value) {
        if(value == '1'){
          this.listDate.dateStrs = undefined;
          this.listDate.tag="3";
        }else {
          this.listDate.tag = undefined;
        }
        this.radio=value;
      },
    }
  }
</script>
<style lang="scss">
  .anly-app-container {
    padding-top: 0;
    padding-left: 27px;
    padding-right: 27px;
    .filter-withline{
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      .over-topline{
        border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      }
    }
    .filter-wrap{
      display: flex;
      align-items: center;
      .filter-item{
        .el-radio-button__orig-radio:checked + .el-radio-button__inner{
          background: rgba(0, 0, 0, 0.3);
        }
        .el-radio-button__inner{
          border-left: 1px solid rgba(80, 227, 194, 0.3) !important;
          border-radius: 0;
          font-weight: normal;
        }
        .el-radio-button:first-child .el-radio-button__inner{
          border-left: 0 !important;
        }
      }
    }
    .aside-withline{
      position: relative;
      height: 720px;
      background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
      color: #50E3C2;
      .list{
        padding-top:12px;
        &>p{
          padding-left: 29px;
          margin: 0;
          i{
            color: rgba(80, 227, 194, 0.5);
          }
        }
      }
    }
    .handle-defect{
      width: 100%;
      height: 200px;
    }
    .table_one {
      width: 100%;
    }
    .table_two,.table_three {
      width: 100%;
    }
    .table_two{
      height: 209px;
    }
    .anly-main{

      .anly-main-wrap{
        min-height: 720px;
        background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
        position: relative;
        .filter-result-wraplist{
          display: flex;
          padding: 40px 20px 20px 22px;
          &>div{
            flex: 1;
          }
          .filter-result-left{
            margin-right: 50px;
          }
        }
      }
      .anly-main-chart{
        margin: 0 20px;
      }
      .list{
        color: #50E3C2;
        &>p{
          i{
            color: rgba(80, 227, 194, 0.5);
          }
        }
      }
    }
    .el-aside {
      height: 800px;
      padding: 22px 0;
    }
    .el-date-editor--daterange.el-input__inner{
      width: 265px;
      margin-left: 10px;
    }
  }
</style>



